<script setup lang="ts">
import { provide } from 'vue'
import { SpMessage } from 'simple-message-toast'
import Child from './components/Child.vue'
import { spMessageKey } from '@/constant/key'

const spMessage = new SpMessage({
  duration: 4000,
})

provide(spMessageKey, spMessage)
</script>

<template>
  <p>
    在vue3中，可以使用依赖注入的方式提供给子组件使用，这里我们使用了InjectionKey来实现跨组件的类型声明，如果没有TS的需求，那么直接使用字符串作为key值直接使用即可。
    关于文档可点击查看 <a href="https://www.npmjs.com/package/simple-message-toast" target="_blank">npm simple-message-toast</a>
  </p>
  <main>
    <child />
  </main>
</template>
